import { Component, OnInit } from '@angular/core';
import LogicFlow from '@logicflow/core';
import { BpmnElement, Control, DndPanel, Menu } from '@logicflow/extension';

@Component({
  selector: 'app-logic-flow-viewer',
  templateUrl: './logic-flow-viewer.component.html',
  styleUrls: ['./logic-flow-viewer.component.css']
})
export class LogicFlowViewerComponent implements OnInit {

  public container: HTMLElement | null = null;
  public lf: LogicFlow | null = null;

  constructor() { }

  ngOnInit(): void {
    this.initLogicFlow();
  }

  initLogicFlow(): void {
    const data = {
      // 节点
      nodes: [
        {
          id: 50,
          type: 'rect',
          x: 100,
          y: 150,
          text: '你好',
        },
        {
          id: 21,
          type: 'circle',
          x: 300,
          y: 150,
        },
      ],
      // 边
      edges: [
        {
          type: 'polyline',
          sourceNodeId: 50,
          targetNodeId: 21,
        }
      ]
    };
    this.container = document.querySelector('#container');
    if (this.container instanceof HTMLElement) {
      LogicFlow.use(BpmnElement);
      LogicFlow.use(Control);
      LogicFlow.use(DndPanel);
      LogicFlow.use(Menu);
      this.lf = new LogicFlow({
        // 容器配置
        container: this.container,
        // 画布配置
        // stopScrollGraph: true,
        // stopZoomGraph: true,
        width: 500,
        height: 500,
        grid: {
          type: 'dot',
          size: 20,
        },
        // 工具配置
        textEdit: true,
        isSilentMode: false,
        edgeType: 'line',
        snapline: true,
        // 样式配置
        style: {
          rect: {
            radius: 6
          }
        }
      });
      this.lf.render(data);
    } else {
      throw new TypeError('Type Error');
    }
  }

}
